<template>
  <view>
      <view class="main">
        <zhaoxin-formList ref="formRef" :requestList="requestList" :rangeItemFun="rangeItemFun" :changeState="changeState"  :formArr="formArr" @change="change" :formObj.sync="formObj" :config="config" />
        <view class="rg_bt" @click="submit" :class="validTF?'sub':''">确定</view>
		<view class="rg_bt sub" @click="gotoPage('/pages/index4/index')" >申请退款</view>
        <div class="tips" style="color:#fff">
          <p>请选择所属学校、年级、班级，并填写姓名，确认
学号。然后选择所需缴纳的费用，直接缴费即可。
需要申请退费的，请提交联系方式及金额。</p>
         
         
         
        </div>
      </view>
    </view>
</template>

<script>
 
 
export default {
  data() {
    return {
      validTF:false,
	  xuexiao:'',
	  banji:'',
	  jiaofei:'',
	  appids:'',
	  money:'',
      formArr: [
      
        {
          el: 'select',
          label: '选择学校',
          code: 'select2',
          getKey:'value',
          placeholder:'简单下拉',
		  
          // isObj:true,
          // selectTypel',
		  
           
          list:[{"value": 0, "label": "选择1学校"}]
        },
        {
          el: 'select',
          label: '选择班级',
          code: 'select3',
          selectType:'all',
          getKey:'value',
          level: 2,//联动级数
          isObj:true,
          required:false,
          list:[]//
        }, 
		
		// {
  //         el: 'select',
  //         label: '缴费项目',
  //         code: 'select',
  //         selectType:'value',
  //         list:[],
  //         inputStyleOut:{
  //           color:'#F00',
  //           textAlign: 'right'
  //         }
  //       },
      {
        label: '学生姓名',// 显示的名字，输入错误、placeholder也会默认“请输入+label”
        code: 'lang',// 表单验证后接收的字段,这个需要是唯一的
        rexType: 'text',//验证规则，可以在util.js里的refObject配置自己需要的通用规则
      },
	  {
	    label: '家长手机号',// 显示的名字，输入错误、placeholder也会默认“请输入+label”
	    code: 'phone',// 表单验证后接收的字段,这个需要是唯一的
	    rexType: 'number',//验证规则，可以在util.js里的refObject配置自己需要的通用规则
	  },
	  {
	    label: '缴费金额',// 显示的名字，输入错误、placeholder也会默认“请输入+label”
	    code: 'money',// 表单验证后接收的字段,这个需要是唯一的
	    rexType: 'number',//验证规则，可以在util.js里的refObject配置自己需要的通用规则
	  },
	//   {
	//     label: '学号',// 显示的名字，输入错误、placeholder也会默认“请输入+label”
	//     code: 'xuehao',// 表单验证后接收的字段,这个需要是唯一的
	//     rexType: 'text',//验证规则，可以在util.js里的refObject配置自己需要的通用规则
	//   },
	
    
        
        
        
      ],
      // 对应数组里的code字段，写了就会赋值进去（用于修改信息），不写也会自动创建
      formObj:{
        //select:'mmp',
        // 结果赋值是按label查找的
        // select3:"LOL,西城区3",
        select3:"3,23",
        invitationCode:'2498489',
        select2:'2',
		money:'',
		lang:'',
		phone:'',
		//xuehao:''
        // select2:'LOL',
      },
      changeState:[],
      config:{
        background:'#afcd6d'
      }
    }
  },
  
  onLoad() {
	  this.getxuexiao()
    // 结果异步
    // getdata.then(res=>{
    //   this.formArr[3].list=res
    //   console.log('res',res)
    // })
    // 表单异步
    // getList.then(res=>{
    //   this.formArr=res
    // })

    // 某个选项异步
    // setTimeout(()=>{
    //   this.formArr[3].list=['延迟获取','慢慢加载','可以的',1346]
    // },1000)
  },
  
  methods: {
    // 联动事件
	 
    rangeItemFun(){
      return{
        /*
        * city 是item的code，代表联动的发起者，返回的是一个list
        * driverSchool ，代表的被影响到的item（的code）
        * val，联动发起者的值
        * obj:当前组件内部的所有结果
        * query是被影响的item的参数
        * 一个item可以返回多个，代表可以影响多个item
        * */
        city:(val,obj)=>{
          return [{
            code:'driverSchool',
            query:{
              city:obj.xxxx,
              name:'xxxx'
            }
          }]
        },
        // city2，city3....
      }
    },
	getxuexiao() {
		let self = this;
		self._get('index/index2', {}, function(res) {
			 self.formArr[0].list=res.data
		});
	},
    /*
    * city对应item的code
    * fun 组件内部异步请求的函数模块结果返回到 到list
    * callback回调，把请求到的结果进行处理，如果返回在data里的数据是组件可以用的就不需要callback
    * */
    requestList(){
      return{
        city:{
          fun:'cityGetCityList',//引入对应的函数模块
          // callback:(res)=>res.storeTypeList.map(v=>({value:v,label:v}))
        },
        driverSchool:{
          fun:'coachGetCoachSchoolList',
          callback:(res)=>res.result.map(v=>({value:v.schoolId,label:v.schoolName}))
        },
      }
    },
    change(val){
		  // console.log(val.code)
		  if(val.code==='money'){
			  let self = this;
			  if(self.formObj.money>0){
				  self.validTF=true
			  }
		  }
		/* 
      if (val.code==='select') {
		    let self = this;
			self.xuexiao=val.otherValue
			 
			console.log(33333+self.xuexiao)
			self._get('index/index5', {id:self.xuexiao}, function(res) {
				   self.formObj.money=res.data.product_price
						 console.log(self.formObj)
			});
			self.validTF=true
			 
      }
	  */
      if (val.code==='select2') {
        this.banji=val.value
		console.log(22222+this.banji)
		let self = this;
		self._get('index/index3', {app_ids:self.banji}, function(res) {
			 self.formArr[1].list=res.data.arr
			 
		});
		self.formArr[2].list=[]
		self.validTF=false
      }
	  if (val.code==='select3') {
	     this.jiaofei=val.value
		  
		 let self = this;
		 console.log(33333+this.jiaofei)
		 self._get('index/index4', {id:self.jiaofei}, function(res) {
		 	  self.formArr[2].list=res.data
			  
		 });
		 
	  }
       

    },
	handleGetDataSucc (res) {
      res = res.data
      var vm = this
      var data = res.data
      if (res.code === 200 && data) {
      // 下面是解决WeixinJSBridge is not defined 报错的方法
        if (typeof WeixinJSBridge === 'undefined') { // 微信浏览器内置对象。参考微信官方文档
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false)
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data))
            document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady(data))
          }
        } else {
          console.log('准备调用微信支付')
          vm.onBridgeReady(data)
        }
      }
    },
    onBridgeReady (data) {
      console.log('调用微信支付WeixinJSBridge')
      var vm = this
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest', { // 下面参数内容都是后台返回的
          "appId":data.appId,
          "timeStamp":data.timeStamp,
          "signType":"MD5",
          "package":data.payPackage,
          "nonceStr":data.nonceStr,
          "paySign":data.paySign
        },
        function (res) {
        // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          if (res.err_msg === 'get_brand_wcpay_request:ok') {
             // alert(res.err_code+res.err_desc+res.err_msg);
          } else {
            // alert(res.err_code+res.err_desc+res.err_msg);
          }
        }
      )
    },
	

    submit(e){
      // console.log(this.$refs.formRef.checkForm())
      // this.$refs.formRef.reset()
      // console.log(123)
      // return;
      if (this.$refs.formRef.checkForm()) {
        let data=this.$refs.formRef.checkForm()
        console.log(e)
        // 提交数据
        // return
		 let self = this;
        self._get('index/zhifu', {id:self.jiaofei,phone:self.formObj.phone,name:self.formObj.lang,
		money:self.formObj.money,appids:self.banji}, function(res) {
        	console.log(res.data.msg)
			if(res.msg=='失败'){
				self.showError('学生信息有误');
				return false;
			}
			self.onBridgeReady(res.data)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "index.scss";
</style> 

